<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>门诊挂号</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style type="text/css">
        .layui-form-select dl {
            max-height: 170px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-form-item" style="height: 60px;line-height: 60px;">
    <div class="layui-form-item layui-inline">
        <label class="layui-form-label">身份证号:</label>
        <div class="layui-input-inline">
            <input type="text" id="patientId" name="idNumber" placeholder="请输入患者身份证号" class="layui-input"
                   autocomplete="off"
                   style="width: 300px;">
        </div>
    </div>
    <div class="layui-form-item layui-inline" style="margin-left: 100px;">
        <button class="pear-btn pear-btn-md pear-btn-primary" onclick="loadPatientInfo()">
            <i class="layui-icon layui-icon-search"></i>
            加载患者信息
        </button>
    </div>
    <span id="msg"></span>
</div>

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="" id="dataFrm" lay-filter="dataFrm">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">身份证号:</label>
                    <div class="layui-input-inline">
                        <input type="text" id="idNumber" name="idNumber"  placeholder="请输入患者身份证号" class="layui-input"
                               autocomplete="off">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">患者姓名:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入患者姓名" class="layui-input"
                               autocomplete="off">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">患者电话:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" placeholder="请输入患者电话" class="layui-input"
                               autocomplete="off">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">出生日期:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="birthday" placeholder="请选择出生日期" id="birthday"
                               class="layui-input" autocomplete="off">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">性别:</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="sex" value="1" title="男" checked>
                        <input type="radio" name="sex" value="2" title="女">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">患者年龄:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="age" placeholder="请输入患者年龄" class="layui-input"
                               autocomplete="off">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">地址信息:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="address" placeholder="请输入地址信息" class="layui-input"
                               autocomplete="off">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">备注:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="remark" placeholder="请输入备注信息" class="layui-input"
                               autocomplete="off">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<form class="layui-form" action="">
    <div class="layui-form-item" style="height: 60px;">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">挂号科室:</label>
            <div class="layui-input-inline">
                <select id="depId" name="depId">
                    <option value="">请选择挂号科室</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">挂号类型:</label>
            <div class="layui-input-inline">
                <select id="type" name="type">
                    <option value="">请选择挂号类型</option>
                    <option value="1">门诊</option>
                    <option value="2">急诊</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">挂号时段:</label>
            <div class="layui-input-inline">
                <select id="intervals" name="intervals">
                    <option value="">请选择挂号时段</option>
                    <option value="1">上午</option>
                    <option value="2">下午</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">病例本:</label>
            <div class="layui-input-inline">
                <select id="book" name="book" lay-filter="price">
                    <option value="">请选择病例本</option>
                </select>
            </div>
        </div>
    </div>
</form>

<div class="layui-form-item">
    <div style="margin-left: 80%;">
        挂号费:&nbsp;&nbsp;<span id="price"></span>&nbsp;¥
        <div class="layui-form-item layui-inline" style="margin-left: 10px;">
            <button class="pear-btn pear-btn-md pear-btn-danger" onclick="charge()">
                <i class="layui-icon layui-icon-search"></i>
                挂号收费
            </button>
        </div>
    </div>
</div>

<!--数据表格-->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="section-table" lay-filter="section-table"></table>
    </div>
</div>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'laydate'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;

        window.loadPatientInfo = function () {
            let value = $("#patientId").val();
            if(value == null ||value ==="" || value === undefined){
                layer.msg("请输入身份证号码！");
            }
            $.ajax({
                url: "/patient/selectOnePatient/" + value,
                dataType: 'json',
                type: 'GET',
                success: function (result) {
                    let patient = result.data;
                    if (patient == null) {
                        $("#msg").css("color", "red");
                        $("#msg").text("查无此患者");
                    }

                    $("[name='idNumber']").val(patient.idNumber);
                    $("[name='name']").val(patient.name);
                    $("[name='phone']").val(patient.phone);
                    $("[name='birthday']").val(patient.birthday);
                    $("[name='age']").val(patient.age);
                    $("[name='address']").val(patient.address);
                    $("[name='remark']").val(patient.remark);
                    $("input[name=sex][value='1']").attr("checked", patient.sex == 1 ? true : false);
                    $("input[name=sex][value='2']").attr("checked", patient.sex == 2 ? true : false);
                    form.render(); //更新全部
                    $("#msg").css("color", "green");
                    $("#msg").text("信息已显示");
                }
            })
        }

        //加载下拉框
        $.get("/department/loadAllDepartment", function (data) {
            let depId = $("#depId");
            let html = '<option value="">请选择挂号科室</option>'
            $.each(data.data, function (i, item) {
                html += '<option value="' + item.id + '">' + item.name + '</option>'
            });
            depId.html(html);
            form.render();
        });

        $.get("/register/loadAllRegisterByIDAndName", function (data) {
            let book = $("#book");
            let html = '<option value="">请选择病例本</option>'
            $.each(data.data, function (i, item) {
                html += '<option value="' + item.id + '">' + item.name + '</option>'
            });
            book.html(html);
            form.render();
        });

        //渲染时间选择器
        laydate.render({
            elem: '#birthday',
        });

        let price;
        form.on("select(price)", function (data) {
            $.ajax({
                url: "/register/selectRegisterById/" + data.value,
                dataType: 'json',
                type: 'GET',
                success: function (result) {
                    price = result.data.price;
                    $("#price").text(price);
                }
            })
        })

        let cols = [
            [
                {
                    title: '科室ID',
                    field: 'id',
                    align: 'center',
                },
                {
                    title: '科室名称',
                    field: 'name',
                    align: 'center'
                },
                {
                    title: '当前号数',
                    field: 'register',
                    align: 'center'
                }
            ]
        ]

        table.render({
            elem: '#section-table',
            url: '/department/loadAllDepartmentByPage',
            page: true,
            cols: cols,
            response: {
                statusCode: 200
            },
        });

        //挂号收费
        window.charge = function () {
            let idNumber = $("#idNumber").val();
            let depId = $("#depId").val();
            let type = $("#type").val();
            let intervals = $("#intervals").val();
            let params = $("#dataFrm").serialize();

            if(idNumber == null ||idNumber === "" ||idNumber === undefined){
                layer.msg('请输入身份证号码！');
                return;
            }

            if(depId == null ||depId === "" ||depId === undefined){
                layer.msg('请选择挂号科室！');
                return;
            }

            if(type == null ||type === "" ||type === undefined){
                layer.msg('请选择挂号类型！');
                return;
            }

            if(intervals == null ||intervals === "" ||intervals === undefined){
                layer.msg('请选择挂号时段！');
                return;
            }

            $.ajax({
                url: '/patient/addPatient',
                data: params,
                type: 'post',
            });

            $.ajax({
                url: "/outpatient/addOutpatient",
                dateType: "json",
                data: {"idNumber": idNumber, "depId": depId, "type": type, "intervals": intervals, "price": price},
                method: "POST",
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
        }

    })
</script>
</body>
</html>
